<template>
    <div>
        <div class="menuadd">
            <el-button round type="primary" @click="add" plain>添加</el-button>
        </div>
        <el-table :data="rolelist" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180"></el-table-column>
            <el-table-column prop="rolename" label="角色名称" width="180"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template v-slot="$prop">
                    <el-button v-if="$prop.row.status == 1" round type="primary" size="mini" plain>正常</el-button>
                    <el-button v-else round type="warning" size="mini" plain>禁用</el-button>
                </template>

            </el-table-column>

            <el-table-column prop="status" label="操作">
                <template v-slot="$prop">
                    <el-button round type="primary" size="mini" @click="change($prop.row)" plain>编辑</el-button>
                    <el-button round type="danger" size="mini" @click="del($prop.row.id)" plain>删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <v-dialog :info="info" ref="son" />
    </div>
</template>


<script>
import { del } from "vue";
import { mapActions, mapState } from 'vuex';
import vDialog from "./dialog.vue"
export default {
    components: {
        vDialog
    },
    computed: {
        ...mapState("role", ["rolelist"])
    },
    methods: {
        ...mapActions("role", ["getrolelist"]),
        // 新增
        add() {
            this.info.isShow = true
        },

        // 删除
        del(id) {
            this.$confirms(() => {
                this.$Api.roledelete({ id }).then((res) => {
                    console.log(res, 111111);
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        // 更新
                        this.getrolelist()

                    } else {
                        this.$message.error(res.msg)
                    }
                })
            })
            console.log(id, "删除");
        },
        // 编辑
        // 修改
        change(add) {
            console.log(add);
            console.log(this.$refs.son);
            this.$refs.son.setInfo(add)
            this.info.isShow = true
        }
    },
    mounted() {
        this.getrolelist()
        console.log(this.getrolelist());
    },
    data() {
        return {
            info: {
                isShow: false
            }
        }
    }
}

</script>


<style leng='less' scoped>

</style>